<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>虚拟竞赛</title>
    <script src="${pageContext.request.contextPath}/dist/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/dist/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/General.css">
</head>
<body>
<jsp:include page="../public/header.jsp"/>
<div class="content-wrapper">
    <div id="base_content">
        <div id="contest-app">
            <div class="contest-base">
                <div class="container contest-detail-base">
                    <div class="page-heading">
                        <div class="back-to-contest">
                            <a href="${pageContext.request.contextPath}/competitionPage">
                                <i class="fa fa-caret-left" aria-hidden="true"><img src="${pageContext.request.contextPath}/images/jkf/backcontent.svg" alt=""></i>
                                &nbsp;返回竞赛主页
                            </a>
                        </div>
                        <div class="title">第${id}场周赛</div>
                    </div>
                    <div class="callout callout-info">
                        距离本场比赛结束：<span id="timer-span">虚拟竞赛待开启</span>
                    </div>
                    <p style="margin: 40px 0;line-height: 1.7">
                        <div class="contest-information container">
                            <div class="row">
                                <div class="col-sm-8 col-md-9">
                                    <h3 class="text-300">
                                        本场竞赛已结束
                                    </h3>
                                    <br>
                                    <h4 class="text-300">
                                        <i class="fa fa-newspaper-o">
                                            <img id="zhuyiImg" src="${pageContext.request.contextPath}/images/jkf/zhuyishixiang.svg" alt="">
                                        </i>
                                        &nbsp;重要提示
                                    </h4>
                                    <ol>
                                        <li>比赛时长为<b>一个半小时</b>(每周日十点半开始，十二点结束，结束时间是固定的)，请注意做题时间。</li>
                                        <li>比赛过程中将请求获取摄像头权限，并<b>禁止切换</b>网页，防止<b>作弊</b>行为。</li>
                                        <li>若发现抄袭或作弊行为，<b>参赛资格将取消</b>，比赛成绩将<b>作废</b>。</li>
                                    </ol>
                                    <br>
                                    <br>
                                    <h4 class="text-300">
                                        <i class="fa fa-bullhorn"><img id="sayImg" src="${pageContext.request.contextPath}/images/jkf/say.svg" alt=""></i>
                                        &nbsp;通知
                                    </h4>
                    <p>
                        您必须先<b style="color: #25bb9b">报名</b>之后才可以参加该竞赛。请务必认真答题，不要出现作弊行为。祝您参赛愉快！
                    </p>
                </div>
                <div class="col-sm-4 col-md-3">
                    <h3 class="text-300">
                        <i class="fa fa-trophy"><img id="jiangImg" src="${pageContext.request.contextPath}/images/jkf/jiangbei.svg" alt=""></i>
                        &nbsp;竞赛奖励
                    </h3>
                    <ul class="list-group" style="margin-top: 20px">
                        <li class="list-group-item">
                            <b>第一名</b>
                            <span class="pull-right">40xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第二名</b>
                            <span class="pull-right">30xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第三名</b>
                            <span class="pull-right">20xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                        <li class="list-group-item">
                            <b>第4-10名</b>
                            <span class="pull-right">10xp<img src="${pageContext.request.contextPath}/images/jkf/jingyan.svg"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="margin: 20px 0">
                <button class="btn btn-primary" id="give">开启虚拟竞赛</button>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <ul class="list-group hover-panel contest-question-list">
                        <li class="list-group-item heading">
                            题目列表
                            <span class="glyphicon glyphicon-question-sign pull-right" data-toggle="tooltip" data-placement="top" aria-hidden="true" id="questionMark"></span>
                            <span class="pull-right">得分&nbsp;&nbsp;</span>
                        </li>
                        <c:forEach items="${programList}" var="program">
                            <%--<c:if test="${status!=0}">--%>
                                <li class="list-group-item usualHref" >
                                    <a href="${pageContext.request.contextPath}/contest/goContestCompile/${program.programId}" >${program.programTitle}</a>
                                    <span class="badge">5</span>
                                </li>
                            <%--</c:if>--%>
                            <%--<c:if test="${status==0}">--%>
                                <%--<li class="list-group-item">--%>
                                    <%--<a href="${pageContext.request.contextPath}/program/goProgram/${program.programId}" class="usualHref">${program.programTitle}</a>--%>
                                    <%--<span class="badge">5</span>--%>
                                <%--</li>--%>
                            <%--</c:if>--%>
                        </c:forEach>
                    </ul>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default hover-panel ranking-list">
                        <div class="panel-heading">
                            本场排名
                        </div>
                        <table class="table table-hover table-striped">

                            <tbody style="text-align: center">
                            <tr >
                                <td>用户名</td>
                                <td>得分</td>
                                <td>
                                    <span>完成时间</span>
                                </td>
                            </tr>
                                <c:forEach items="${rank}" var="rank">
                                    <tr>
                                        <td>${rank.customerName}</td>
                                        <td>${rank.contestMsgMark}</td>
                                        <td>${rank.contestMsgThroughTime}ms</td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="tips"><span>每个题对应的分值</span></div>
            </div>
        </div>
    </div>
</div>
<script>
    var contestId="${contestId}";
    var giveBtn = document.querySelector("#give");
    var usualHref = document.querySelectorAll(".usualHref");
</script>
<script src="${pageContext.request.contextPath}/js/virtualCon.js"></script>
<script src="${pageContext.request.contextPath}/js/runContest.js"></script>
<jsp:include page="../public/footer.jsp"/>
</body>
</html>